<template>
  <div class="container" v-loading="loading">
    <div id="content" class="content">
      <img :src="currentImg ? imgUrlPrefix + currentImg : currentImg" @load="imgLoadComplete" alt="">
      <div v-if="helpMark" class="help_body">
        <div class="rect" :style="{
            position: 'absolute',
            backgroundImage: 'url(' + imgUrlPrefix + currentImg + ')',
            backgroundSize: `${imgWidth}px ${imgHeight}px`,
            backgroundPosition: `-${helpMark.left}px -${helpMark.top}px`,
            width: helpMark.width,
            height: helpMark.height,
            left: helpMark.x,
            top: helpMark.y
          }"/>
        <div id="help_wrapper" class="help_wrapper" :style="helpMark.style">
          <div v-show="!helpMark.style || helpMark.style.justifyContent !== 'end' " class="arrow"
               :style="{transform: helpMark.transform,
                height: helpMark.style && helpMark.style.flexDirection === 'column' ? '50px' : 'auto'}">
            <div class="line"></div>
            <div class="arrow_right"></div>
          </div>
          <div class="help">
            <p>{{ helpMark.elementDesc }}</p>
            <div class="bottom_action">
              <span @click="nextHelp(helpMark.nextFalg !== 1)">{{ helpMark.nextFalg === 1 ? '下一步' : '完成' }}</span>
            </div>
            <i class="el-icon-close close" @click="nextHelp(true)"></i>
          </div>
          <div v-if="!helpMark.style || helpMark.style.justifyContent === 'end' " class="arrow"
               :style="{transform: helpMark.transform, height: helpMark.style && helpMark.style.flexDirection === 'column' ? '50px' : 'auto'}">
            <div class="line"></div>
            <div class="arrow_right"></div>
          </div>
        </div>

      </div>
      <template v-if="currentNode && !helpMark">
        <div v-for="(item, index) in currentNode.elementList" :key="index"
             class="mark_item"
             style="position: absolute"
             :style="{
                    left: item.x,
                    top: item.y,
                    width: item.width,
                    height: item.height
                 }"
        >
          <div v-if="item.elementType === 1" @click="anchorClick(index)"></div>

          <div v-if="item.elementType === 3" class="scroll_bar" @click="anchorClick(index)">
            <div class="arrow"/>
            <div class="bar"/>
            <div class="arrow"/>
          </div>
          <div v-if="item.elementType === 4" class="mask"/>
        </div>
      </template>
    </div>
    <div v-if="!helpMark && currentNode" style="position: absolute; bottom: 20px; right: 20px">
      <el-button type="success" @click="showMark" size="large">显示帮助指引</el-button>
    </div>
  </div>
</template>
<script>
import {configPreview, queryNextPicture, selectCourseHintForPreview, selectNextCourseHint} from "@/api";

export default {
  name: "CoursePreview",
  data() {
    return {
      loading: false,
      imgUrlPrefix: process.env.VUE_APP_ASSETS_URL,
      currentNode: undefined,
      currentImg: undefined,
      helpMark: undefined,
      imgWidth: 0,
      imgHeight: 0
    }
  },
  created() {
    this.questionId = this.$route.query.questionId
    this.loadPageNode()
  },
  methods: {
    handlerNodeElement(data) {
      if (data.elementList) {
        data.elementList.forEach(item => {
          item.elementType = Number.parseInt(item.elementType)
          item.width = Number.parseFloat(item.x1) - Number.parseFloat(item.x) + "%"
          item.height = Number.parseFloat(item.y1) - Number.parseFloat(item.y) + "%"
          item.top = Number.parseFloat(item.y) * this.imgHeight / 100
          item.left = Number.parseFloat(item.x) * this.imgWidth / 100
        })
      }
    },
    loadPageNode(sendPageId) {
      const request = sendPageId === undefined ? configPreview(this.questionId) : queryNextPicture(this.questionId, sendPageId)
      this.loading = true
      this.currentNode = undefined
      request.then(res => {
        this.handlerNodeElement(res)
        this.showMode = 0
        this.currentNodeTemp = res
        this.handleSetCurrentImgUrl(res.contentUrl)
      }).catch(() => {
        this.currentNode = this.currentNodeTemp
      }).finally(() => {
        this.loading = false
      })
    },
    imgLoadComplete() {
      console.log("imgLoadComplete")
      this.imgWidth = document.getElementById('content').offsetWidth
      this.imgHeight = document.getElementById('content').offsetHeight
      if (this.showMode === 0) {
        this.currentNode = this.currentNodeTemp
      } else {
        this.helpMark = this.helpMarkTemp
        this.calcHelpPosition()
      }
      console.log(this.currentNode)
    },
    handleSetCurrentImgUrl(url) {
      if (this.currentImg === url) {
        if (this.showMode === 0) {
          this.currentNode = this.currentNodeTemp
        } else {
          this.helpMark = this.helpMarkTemp
          this.calcHelpPosition()
        }
      } else {
        this.currentImg = url
      }
    },

    anchorClick(index) {
      const sendPageId = this.currentNode.elementList[index].sendPageId
      this.loadPageNode(sendPageId)
    },
    loadMark(elementOrder) {
      this.loading = true
      const request = elementOrder === undefined ? selectCourseHintForPreview({
        questionId: this.questionId,
        pageId: this.currentNodeTemp.pageId
      }) : selectNextCourseHint(this.questionId, this.currentNodeTemp.pageId, elementOrder)
      request.then(res => {
        res.elementType = Number.parseInt(res.elementType)
        res.width = Number.parseFloat(res.x1) - Number.parseFloat(res.x) + "%"
        res.height = Number.parseFloat(res.y1) - Number.parseFloat(res.y) + "%"
        res.top = Number.parseFloat(res.y) * this.imgHeight / 100
        res.left = Number.parseFloat(res.x) * this.imgWidth / 100
        this.helpMarkTemp = res
        this.showMode = 1
        this.handleSetCurrentImgUrl(res.contentUrl)
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    },
    nextHelp(lastStep) {
      if (lastStep || this.helpMark.nextFalg !== 1) {
        this.helpMark = undefined
        this.showMode = 0
        this.handleSetCurrentImgUrl(this.currentNodeTemp.contentUrl)
        return
      }
      this.loadMark(this.helpMark.elementOrder)
    },
    showMark() {
      this.currentNodeTemp = this.currentNode
      this.currentNode = undefined
      this.loadMark()
    },
    calcHelpPosition() {
      const result = this.helpMark
      this.$nextTick(() => {
        const el = document.getElementById("help_wrapper")
        const height = el.offsetHeight
        const width = el.offsetWidth
        const markHeight = this.imgHeight * Number.parseFloat(result.height) / 100
        const markWidth = this.imgWidth * Number.parseFloat(result.width) / 100
        const centerY = result.top + markHeight / 2
        const centerX = result.left + markWidth / 2
        const rect = [0, 0, 0, 0]
        const border = 10
        rect[0] = rect[0] + border + 50
        rect[1] = centerY - markHeight / 2 - height - 50
        rect[2] = result.left + markWidth + width + border
        rect[3] = result.top + markHeight + height + border
        console.log(el, rect, this.imgHeight, this.imgWidth)
        let style = {}
        let transform = ''
        if (rect[0] > 0 && centerY - height / 2 - border > 0 && rect[2] < this.imgWidth && centerY + height / 2 + border < this.imgHeight) {
          if (rect[0] < 0 && rect[2] > this.imgWidth) {
            // 无法显示
            style = {
              display: 'flex',
              alignItems: 'center',
              flexDirection: 'column',
              justifyContent: 'end',
              left: centerX - width / 2,
              top: rect[1]
            }
            transform = `rotate(-90deg)`
          } else if (rect[2] > this.imgWidth) {
            // 右边无法显示
            style = {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'end',
              left: rect[0],
              top: centerY - height / 2
            }
            transform = `rotate(-180deg)`
          } else {
            //rect[0] < 0
            // 左边无法显示
            style = {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'start',
              left: rect[2] - width - border,
              top: centerY - height / 2
            }
          }
        } else if (rect[1] > 0) {
          style = {
            display: 'flex',
            alignItems: 'center',
            flexDirection: 'column',
            justifyContent: 'end',
            left: centerX - width / 2,
            top: rect[1]
          }
          transform = `rotate(-90deg)`
        } else if (rect[3] < this.imgHeight) {
          style = {
            display: 'flex',
            alignItems: 'center',
            flexDirection: 'column',
            justifyContent: 'stat',
            left: centerX - width / 2,
            top: centerY + markHeight / 2
          }
          transform = `rotate(90deg)`
        }
        style.left = style.left + 'px'
        style.top = style.top + 'px'
        this.$set(this.helpMark, 'style', style)
        this.$set(this.helpMark, 'transform', transform)
        console.log(this.helpMark)
      })

    },
  }
}
</script>


<style scoped lang="scss">
.container {
  height: 100vh;
  overflow-y: auto;

  .content {
    position: relative;

    img {
      display: block;
      width: 100%;
    }

    .mark_item {
      position: absolute;

      & > div {
        height: 100%;
      }

      .mask {
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.25);
      }

      .scroll_bar {
        background-color: #eeeeee;
        width: 20px;
        padding: 3px;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        :first-child {
          transform: rotate(-90deg);
        }

        :last-child {
          transform: rotate(90deg);
        }

        .arrow {
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 5px solid #999999;
        }

        .bar {
          height: 75%;
          width: 16px;
          background-color: #999999;
          border-radius: 8px;
        }

        &:hover {
          .bar {
            background-color: #666666;
          }
        }
      }


    }


  }

  .help_body {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);

    .rect {
      position: absolute;
      border: 1px dashed #999;
      border-radius: 5px;
    }

    .help_wrapper {
      display: flex;
      align-items: center;
      position: absolute;

      .help {
        position: relative;
        width: 250px;
        height: auto;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px;
        font-size: 14px;
        color: #fff;
        line-height: 30px;

        .close {
          font-size: 18px;
          position: absolute;
          top: -20px;
          right: -20px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          display: block;
          width: 22px;
          height: 22px;
          text-align: center;
          line-height: 22px;
        }

        .bottom_action {
          display: flex;
          justify-content: end;
          align-items: center;
          margin-top: 10px;


          span {
            cursor: pointer;
            color: #fff;
          }
        }
      }

      .arrow {
        position: relative;
        margin: 0 1px;
        width: 50px;

        .line {
          content: '';
          display: block;
          position: absolute;
          top: 2px;
          left: 0;
          width: 50px;
          height: 1px;
          background-color: white;
        }

        .arrow_right {
          position: absolute;
          top: 0;
          right: 0;
          display: inline-block;
          border-top: 1px solid white;
          border-right: 1px solid white;
          width: 5px;
          height: 5px;
          transform: rotate(45deg);
        }
      }
    }


  }
}

</style>
